<template>
  <div class="contentShadow">
    <el-container>
      <el-header>
        <h1>学生信息表</h1>
      </el-header>
      <el-main>
        <el-form ref="form" :model="user" label-width="100px">
          <el-form-item label="学号" prop="studentId">
            <el-input v-model="user.studentId" disabled="disabled"></el-input>
          </el-form-item>
          <el-form-item label="姓名" prop="name">
            <el-input v-model="user.name" disabled="disabled"></el-input>
          </el-form-item>
          <el-form-item label="姓名拼音" prop="pinyin">
            <el-input v-model="user.pinyin" disabled="disabled"></el-input>
          </el-form-item>
          <el-form-item label="籍贯" prop="nativePlace">
            <el-input v-model="user.nativePlace" disabled="disabled"></el-input>
          </el-form-item>
          <el-form-item label="民族" prop="nationality">
            <el-input v-model="user.nationality" disabled="disabled"></el-input>
          </el-form-item>
          <el-form-item label="性别" prop="gender">
            <el-radio-group v-model="user.gender" disabled="disabled">
              <el-radio label="1">男</el-radio>
              <el-radio label="0">女</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="政治面貌" prop="politicalStatus">
            <el-input v-model="user.politicalStatus" disabled="disabled"></el-input>
          </el-form-item>
          <el-form-item label="专业" prop="major">
            <el-input v-model="user.major" disabled="disabled"></el-input>
          </el-form-item>
          <el-form-item label="学苑" prop="class">
            <el-input v-model="user.class" disabled="disabled"></el-input>
          </el-form-item>
          <el-form-item label="成绩" prop="gpa">
            <el-input v-model="user.gpa" disabled="disabled"></el-input>
          </el-form-item>
          <el-form-item label="志愿时长" prop="volunteer">
            <el-input v-model="user.volunteer" disabled="disabled"></el-input>
          </el-form-item>
        </el-form>
        <el-button type="primary" @click="submitForm" disabled="disabled">提交</el-button>
        <el-button @click="resetForm" disabled="disabled">重置</el-button>
        <el-button type="danger" @click="open">申诉</el-button>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import {getStudentInfo} from "@/api/student";

export default {
  name: "AddUser",
  data() {
    return {
      user: {
        stuID: "",
        name: "",
        pinyin: "Ouyang Xufeng",
        idCard: "1234567890",
        nativePlace: "北京市北京市大兴区",
        nationality: "汉族",
        gender: "",
        birthYearMonth: "1999年1月",
        politicalStatus: "",
        major: "",
        class: "",
        gpa: 4.00,
        volunteer: 88,
      }
    };
  },
  mounted() {
    getStudentInfo().then((res) => {
      console.log(res.data);
      this.user.studentId = res.data.studentId;
      this.user.name = res.data.studentName;
      this.user.gender = res.data.studentGender.toString();
      this.user.politicalStatus = res.data.politicalStatus.toString();
      this.user.major = res.data.majorId.toString();
      this.user.class = res.data.classId.toString();
      //const gender = res.data.studentGender;
      // if (gender === 0) {
      //     this.user.gender = '0';
      // } else {
      //     this.user.gender = '1';
      // }

    });
  },
  methods: {
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          // TODO: send user data to backend
          console.log(this.user);
        } else {
          console.log("form validation failed");
        }
      });
    },
    resetForm() {
      this.$refs.form.resetFields();
    },
    open() {
      this.$prompt('请输入申诉信息，拖动输入框右下角可调节大小', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputType: 'textarea'
      }).then(({value}) => {
        this.$message({
          type: 'success',
          message: '发送成功，请耐心等待'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        });
      });
    }
  },
};
</script>

<style>

</style>
